<template>
  <el-form ref="engineer" :model="engineer" :rules="rules"
           label-width="120px" style="width: 90%;margin:5%; ">
    <el-form-item label="姓名" prop="realName">
      <el-input v-model="engineer.realName" :disabled=!!engineer.pkid></el-input>
    </el-form-item>
    <el-form-item label="手机号码" required prop="mobilePhone">
      <el-input v-model="engineer.mobilePhone" :disabled=!!engineer.pkid></el-input>
    </el-form-item>
    <el-form-item label="证件号" required prop="idCard" :disabled=!!engineer.pkid>
      <el-input v-model="engineer.idCard" :disabled=!!engineer.pkid></el-input>
    </el-form-item>
    <el-form-item label="标签" required prop="idCard" :disabled=!!engineer.pkid>
      <el-select placeholder="请选择标签" style="width:100%"
        v-model="engineer.tagNames"
        multiple filterable allow-create>
        <el-option
          v-for="item in tags"
          :label="item.name"
          :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker type="datetime" :disabled=true placeholder="选择日期"
                      v-model="engineer.createDate" style="width: 100%"></el-date-picker>
    </el-form-item>
    <el-form-item label="状态">
      <el-radio-group v-model="engineer.status">
        <el-radio :label="'1'">在用</el-radio>
        <el-radio :label="'0'">停用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="上传文件">
      <input type="file" ref="upload" name="file" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit" v-if="hasRight('edit')">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<style>
</style>
<script type="text/babel">
  import mixin from '../../../mixin/rights'
  import api from '../../../api/engineer'
  import tagApi from '../../../api/engineer/tagApi'
  import remoteJs from '../../../component-parts/remote-js'
  import {vPhone, vIDCard} from '../../../common/js/validate'

  export default{
    data () {
      return {
        rules: {
          realName: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
          ],
          mobilePhone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { validator: vPhone, trigger: 'blur' }
          ],
          idCard: [
            { required: true, message: '请选输入证件号', trigger: 'blur' },
            { validator: vIDCard, trigger: 'blur' }
          ]
        },
        engineer: {},
        roles: [],
        tags: []
      }
    },
    components: {
      'remote-js': remoteJs
    },
    mixins: [mixin],
    created () {
      if (this.$route.params.id !== 'create') {
        api.getById(this.$route.params.id).then((resp) => {
          let egnr = resp.body.data
          egnr.tagNames = egnr.tags.map(tag => tag.name)
          this.engineer = egnr
        })
      } else {
        this.$set(this.engineer, 'status', '1')
        this.$set(this.engineer, 'tagNames', [])
        this.$set(this.engineer, 'createDate', new Date())
      }

      tagApi.getAll().then(resp => {
        this.tags = resp.body.data
      })
    },
    methods: {
      onSubmit () {
        this.engineer.file = this.$refs.upload.files[0]

        this.$refs.engineer.validate((valid) => {
          const edata = new window.FormData()
          edata.append('file', this.engineer.file)
          if (valid) {
            api.file(edata).then(() => {
              return api.save(this.engineer)
            }).then((data) => {
              if (this.engineer.pkid) {
                this.engineer = data.body.data
              }
              this.$message({
                showClose: true,
                message: '保存成功',
                type: 'success'
              })
            })
          } else {
            return false
          }
        })
      },
      cancel () {
        this.$router.push('/engineer')
      }
    }
  }
</script>
